<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>双飞翼和圣杯布局</title>
    <style>
        * {
            margin: 0;
        }

        body {
            min-width: 550px;
        }

        .left1 {
            float: left;
            width: 300px;
            height: 100px;
            background: red;
        }

        .right1 {
            overflow: hidden;
            height: 200px;
            background: yellow;
        }

        .header {
            height: 20px;
            background: #cccccc;
        }

        .footer {
            height: 50px;
            background: #cccccc;
            clear: both;
        }

        .container {
            padding: 0 200px 0 150px;
        }

        .float {
            float: left;
        }

        .container .center {
            width: 100%;
            background: #fee233;
        }

        .container .left {
            background: wheat;
            width: 150px;
            margin-left: -100%;
            position: relative;
            left: -150px;
        }

        .container .right {
            background: #ef2367;
            width: 200px;
            margin-right: -100%;
        }

        .container1 {
            padding: 0 150px 0 200px;
        }

        .container1 .center {
            background: #fee233;
        }

        .left2 {
            background: wheat;
            width: 200px;
            margin-left: -100%;
        }

        .right2 {
            background: #ef2367;
            width: 150px;
            margin-left: -150px;
        }

        .cflex {
            display: flex;
        }

        .cflex .centerflex {
            background: #fee233;
            flex: 1;
        }

        .cflex .leftflex {
            background: wheat;
            flex: 0 0 200px;
            order: -1;
        }

        .cflex .rightflex {
            background: #ef2367;
            flex: 0 0 150px;
        }
    </style>
</head>

<body>
    <h2>1. 两栏布局,左边定宽，右边自适应</h2>
    <h3>1.1 左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响</h3>
    <div>
        <div class="left1"></div>
        <div class="right1"></div>
    </div>
    <hr />
    <h2>2. 三栏布局，圣杯布局、双飞翼布局</h2>
    <p>
        圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）。
        <br />
        <br />
        虽然两者的实现方法略有差异，不过都遵循了以下要点：
    <ul>
        <li>
            两侧宽度固定，中间宽度自适应
        </li>
        <li>
            中间部分在DOM结构上优先，以便先行渲染
        </li>
        <li>
            允许三列中的任意一列成为最高列
        </li>
        <li>
            只需要使用一个额外的&lt;div&gt;外层标签
        </li>
    </ul>
    </p>
    <h3>2.1 圣杯布局</h3>
    <div class="header">This is the header.</div>
    <div class="container">
        <div class="center float">
            <h1>This is the main content.</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
                dolor
                in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
                at
                vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
                dolore te feugait nulla.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
                dolor
                in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
                at
                vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
                dolore te feugait nulla.</p>
        </div>
        <div class="left float">
            <h2>This is the left sidebar.</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
                dolor
                in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
                at
                vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
                dolore te feugait nulla.</p>
        </div>
        <div class="right float">
            <h2>This is the right sidebar.</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
                dolor
                in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
                at
                vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
                dolore te feugait nulla.</p>
        </div>
    </div>
    <div class="footer">This is the footer.</div>
    <h3>2.2 双飞翼布局</h3>
    <div class="header">This is the header.</div>
    <div class="container1 float">
        <div class="center">
            <h1>This is the main content.</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
                dolor
                in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
                at
                vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
                dolore te feugait nulla.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
                dolor
                in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
                at
                vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
                dolore te feugait nulla.</p>
        </div>
    </div>
    <div class="left2 float">
        <h2>This is the left sidebar.</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
            laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
            ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
            dolor
            in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
            at
            vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
            dolore te feugait nulla.</p>
    </div>
    <div class="right2 float">
        <h2>This is the right sidebar.</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
            laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
            ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
            dolor
            in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
            at
            vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
            dolore te feugait nulla.</p>
    </div>
    <div class="footer">This is the footer.</div>
    <h3>2.3 flex布局</h3>
    <div class="header">This is the header.</div>
    <div class="cflex">
        <div class="centerflex">
            <h1>This is the main content.</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
                dolor
                in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
                at
                vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
                dolore te feugait nulla.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
                dolor
                in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
                at
                vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
                dolore te feugait nulla.</p>
        </div>
        <div class="leftflex">
            <h2>This is the left sidebar.</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
                dolor
                in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
                at
                vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
                dolore te feugait nulla.</p>
        </div>
        <div class="rightflex">
            <h2>This is the right sidebar.</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
                dolor
                in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
                at
                vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
                dolore te feugait nulla.</p>
        </div>
    </div>
    <div class="footer">This is the footer.</div>
</body>

</html>